html,
body {
  padding: 0;
}
#wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#controls {
  flex: none;
}
#stage {
  flex: auto;
  position: relative;

  & > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: lightgoldenrodyellow;
  }
}
#stageResizer {
  padding-right: 20px;
  padding-bottom: 20px;
}

#bodyOverflow {
  position: absolute;
  width: 101vw;
  height: 101vh;
  z-index: -1;
}

.resizeBtn {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 20px;
  width: 20px;
  background: black;
}

.row {
  display: flex;
  inline-size: 100%;
  block-size: 50%;
}

#targetA {
  inline-size: 50%;
  block-size: 100%;
  background: rgba(255, 0, 0, 0.3);
}

#targetB {
  inline-size: 50%;
  block-size: 100%;
  direction: rtl;
  background: rgba(255, 0, 255, 0.3);
}

#targetC {
  inline-size: 50%;
  block-size: 100%;
  background: rgba(0, 255, 0, 0.3);
}

#targetD {
  inline-size: 50%;
  block-size: 100%;
  direction: rtl;
  background: rgba(0, 0, 255, 0.3);
}

.flexReverse {
  background: red;
}

.flexReverse [data-overlayscrollbars-viewport] {
  display: flex;
}

.flexReverse #targetA [data-overlayscrollbars-viewport] {
  flex-direction: row-reverse;
}
.flexReverse #targetB [data-overlayscrollbars-viewport] {
  flex-direction: column-reverse;
}
.flexReverse #targetC[data-overlayscrollbars-viewport] {
  flex-direction: column-reverse;
}
.flexReverse #targetD[data-overlayscrollbars-viewport] {
  flex-direction: row-reverse;
}

.content {
  width: 5000px;
  height: 5000px;
  border: 4px solid black;
  flex: none;
}

.scrollPoint {
  position: absolute;
  width: 2px;
  height: 2px;
  z-index: 999;
  pointer-events: none;
}

.scrollPoint.start {
  background: blue;
}

.scrollPoint.end {
  background: red;
}

.os-scrollbar-horizontal .scrollPoint.start {
  inset-inline-start: 0;
  inset-inline-end: auto;
  inset-block-start: 50%;
}

.os-scrollbar-horizontal .scrollPoint.end {
  inset-inline-end: 0;
  inset-inline-start: auto;
  inset-block-start: 50%;
}

.os-scrollbar-vertical .scrollPoint.start {
  inset-block-end: auto;
  inset-block-start: 0;
  inset-inline-start: 50%;
}

.os-scrollbar-vertical .scrollPoint.end {
  inset-block-end: 0;
  inset-block-start: auto;
  inset-inline-start: 50%;
}

body.nsh {
  .os-environment-scrollbar-hidden {
    scrollbar-width: auto !important;
  }
  .os-environment-scrollbar-hidden::-webkit-scrollbar,
  .os-environment-scrollbar-hidden::-webkit-scrollbar-corner {
    display: block !important;
  }
}
